import React, { Component } from 'react'
import { NavBar } from 'antd-mobile';
import SearchInput from '../searchInput/searchInput';
import styles from './index.module.scss'

import myaxios from "../../utils/myaxios";
import axios from "axios"

export default class index extends Component {
    constructor(props) {
        super(props);
        const CancelToken = axios.CancelToken;
        this.source = CancelToken.source();
    }
    state = {
        categories: [], // 返回的菜单数据
        categories_content: [], // 右边菜单渲染的内容
        select_index: 0, // 当前选中左边的菜单
    };

    // 左边分类菜单点击的时候触发
    handleItemClick = (e) => {
        // 获取点击选中的项
        let select_index = e.target.getAttribute("data-index");
        console.log(select_index);
        this.setState({
            select_index: parseInt(select_index),
            categories_content: this.state.categories[select_index].children,
        });
    };

    // 右边图片点击的时候
    handleProductItemClick = (e) => {
        let cid = e.target.getAttribute("data-index");
        // console.log(this.props);
        // console.log(cid);
        this.props.history.push("/goodList/" + cid);
    };

    componentWillUnmount() {
        this.source.cancel("取消分类菜单的请求");
    }

    // 获取分类菜单的数据
    getCategories = (params) => {
        myaxios
            .get("categories", {
                cancelToken: this.source.token
            })
            .then((res) => {
                this.setCategories(res);
            })
            .catch((err) => {
                console.log(err);
            });
    };

    // 设置分类菜单的数据
    // is_storaged 代表是否之前已经缓存过
    setCategories = (res, is_storaged) => {
        //缓存请求的数据
        let categories_cache = {};
        // 如果之前没有缓存过
        if (!is_storaged) {
            categories_cache = { date: Date.now(), categories: res };
            // 缓存到本地中
            localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
        }
        this.setState({
            categories: res,
            categories_content: res[0].children,
        });
    };

    componentDidMount() {
        // https://www.linweiqin.cn/api/public/v1/categories
        // 进来的时候 先判断本地缓存是否过期
        // 如果没有过期的情况下 直接获取本地的缓存
        let categories_cache = localStorage.getItem("categories_cache"); // {} null
        // 如果本地缓存不会空
        if (categories_cache && JSON.parse(categories_cache).date) {
            // 判断本地缓存是否过期
            // 当前时间
            let current_time = Date.now();
            // 存储的时间
            let storage_time = JSON.parse(categories_cache).date;
            if (current_time - storage_time > 60 * 60 * 1000) {
                // 一小时过期
                this.getCategories();
            } else {
                // 缓存没有过期
                // 第二个参数 代表是否已经缓存
                this.setCategories(JSON.parse(categories_cache).categories, true);
            }
        } else {
            this.getCategories();
        }
    }
    render() {
        return (
            <div className="yg_category">
                {/* 导航栏开始 */}
                <section>
                    <NavBar className={styles.header}>优购商城</NavBar>
                </section>
                {/* ---导航栏结束 */}

                {/* 搜索框开始 */}
                <section>
                    <SearchInput></SearchInput>
                </section>
                {/* ---搜索框结束 */}

                {/* 分类菜单开始 */}
                <section>
                    <div className={styles.category_content}>
                        <div className={styles.category_content_left} onClick={this.handleItemClick}>
                            {this.state.categories.map((v, index) => {
                                return (
                                    <div
                                        data-index={index}
                                        className={
                                            this.state.select_index === index
                                                ? `${styles.active} ${styles.content_left_item}`
                                                : `${styles.content_left_item}`
                                        }
                                        key={v.cat_id}
                                    >
                                        {v.cat_name}
                                    </div>
                                );
                            })}
                        </div>
                        <div className={styles.category_content_right}>
                            {this.state.categories_content.map((v, i) => {
                                return (
                                    <div className={styles.content_right_item} key={v.cat_id}>
                                        {/* 二级菜单标题开始 */}
                                        <div className={styles.right_item_title}>
                                            {"/"}
                                            {v.cat_name}
                                            {"/"}
                                        </div>
                                        {/* 二级菜单标题结束 */}
                                        {/* 产品列表开始 */}
                                        <div
                                            className={styles.product_list}
                                            onClick={this.handleProductItemClick}
                                        >
                                            {v.children &&
                                                v.children.map((v) => {
                                                    return (
                                                        <div
                                                            key={v.cat_id}
                                                            className={styles.product_list_item}
                                                            data-index={v.cat_id}
                                                        >
                                                            <div className={styles.imagerWrapper}>
                                                                <img
                                                                    src={v.cat_icon}
                                                                    alt=""
                                                                    data-index={v.cat_id}
                                                                />
                                                            </div>
                                                            <div className={styles.item_title}>{v.cat_name}</div>
                                                        </div>
                                                    );
                                                })}
                                        </div>
                                        {/* 产品列表结束 */}
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </section>
                {/* ---分类菜单结束 */}
            </div>
        )
    }
}
